<template>
  <div class="wallet">
    <div class="height">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span>我的钱包</span>
    </div>
    <div class="personalList">
        <div class="personalLi wallets">
              <div class="left">
                  <span>余额：</span>
                  <i>{{ wallet }}</i>
              </div>
          </div>
          <div class="personalLi">
              <div class="left">
                  <span>账户充值</span>
              </div>
          </div>
          <div class="personalLi">
              <div class="left" @click='$router.push("/payment")'>
                  <span>支付密码</span>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'wallet',
  data () {
    return {
      wallet: '',
    }
  },
  computed:{
    token() {
      return this.$store.state.app.token
    },
    userId() {
      return this.$store.state.app.userId
    },
		openId() {
		  return this.$store.state.app.openId
		},
  },
  mounted(){
      this.walletSow()
      
  },
  methods:{
    goBack(){
      this.$router.push("/personal");
    },
    walletSow(){
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
        });
        this.axios({
            method: 'post',
            url: '/app/campus/tx/myWallet',
            headers: {'userId': this.userId,'token': this.token},
						data: {
						  'openId': this.openId
						}
        }).then(res =>{
            console.log(res.data);
            this.wallet = res.data.data.validAmount;
            loading.close();
        })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.height{
  background: #fcd927;height: 42px;font-size: 16px;line-height: 42px;text-align: center;color: #fff;padding: 0 8px;display: flex;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin-bottom: 3px;
}
.height i{line-height: 42px;font-size: 18px;width: 30px;}
.personalList{padding: 0 10px;}
.personalLi{display: flex;justify-content: space-between;line-height: 48px;align-items: center;font-size: 16px;border-bottom: 1px solid #ddd;}
.personalLi.wallets{line-height: 96px;}
.left{display: flex;align-items: center;}
.left span{margin-left: 12px;}
.wallets i{color: #F56C6C;}
</style>
